<template>
  <div class="container">
    <!--标题部分-->
    <div class="title">
      <div class="title-left">
        <img src="../../public/static/img/菱形.png" alt="" />
        <!--          <svg t="1621838762952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2430" width="30" height="30"><path d="M512 951.6c-20.1 0-39.4-8-53.7-22.2L94.6 565.7C65 536 65 488 94.6 458.3L458.3 94.6C488 65 536 65 565.7 94.6l363.7 363.7c14.2 14.2 22.2 33.5 22.2 53.7 0 20.1-8 39.4-22.2 53.7L565.7 929.4c-14.3 14.2-33.6 22.2-53.7 22.2zM255.6 512L512 768.4 768.4 512 512 255.6 255.6 512z" p-id="2431" fill="#18f0ea"></path></svg>-->
        <div class="title-Style">乡村经营</div>
      </div>
      <div class="title-right">详细介绍</div>
    </div>
    <!--图表部分-->
    <div class="body"></div>
  </div>
</template>

<script>
export default {
  name: "VillageGeneral",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(165, 181, 199, 0.2);
  border: 1px solid;
  border: #3c3f41;
}

.title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.title-left {
  width: 55%;
  color: #ffffff;
  margin-left: 5px;
  background-color: rgba(42, 132, 165, 0.7);
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.title-Style {
  margin-left: 8px;
}
.title-right {
  position: absolute;
  color: #ffffff;
  font-size: 13px;
  width: 30%;
  background-color: rgba(42, 132, 165, 0.7);
  border-radius: 5px;
  float: right;
  right: 1%;
  text-align: center;
}
</style>

